<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
    <title>homePage</title>
    <script src="js/rem.js"></script>
    <script src="js/jquery-1.11.3.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        html,
        body {
            height: 100%;
        }

        input {
            -webkit-appearance: none;
            /*清除ios默认圆角*/
            border-radius: 0;
        }

        .main {
            width: 100%;
            max-width: 7.5rem;
            height: auto;
            min-height: 100%;
            margin: 0 auto;
            background-color: #f7f7f7;
        }

        .bannerBox {
            width: 7.5rem;
        }

        .bannerBox img {
            display: block;
            width: 100%;
        }

        .formBox {
            width: 6.45rem;
            margin: 0.35rem auto 0;
        }

        .formList {
            position: relative;
            padding: 0.3rem 0.8rem 0.3rem 0.75rem;
            border-bottom: 1px solid #cccccc;
        }

        .formList1 {
            margin-bottom: 0.35rem;
        }

        .formList1::after {
            content: " ";
            position: absolute;
            width: 0.26rem;
            height: 0.36rem;
            background: url(images/homeIcon1.jpg) no-repeat;
            background-size: cover;
            left: 0.25rem;
            top: 50%;
            margin-top: -0.18rem;
        }

        .formList2::after {
            content: " ";
            position: absolute;
            width: 0.26rem;
            height: 0.34rem;
            background: url(images/homeIcon2.jpg) no-repeat;
            background-size: cover;
            left: 0.25rem;
            top: 50%;
            margin-top: -0.17rem;
        }

        .phoneNum,
        .passWord {
            display: block;
            width: 4.9rem;
            border: 0;
            outline: none;
            background-color: transparent;
            font-size: 0.3rem;
            color: #cccccc;
            line-height: 1;
        }

        .sub {
            display: block;
            width: 6.45rem;
            height: 0.84rem;
            line-height: 0.84rem;
            margin-top: 0.8rem;
            border: 1px solid #fbaba4;
            color: #fbaba4;
            font-size: 0.4rem;
            text-align: center;
            border-radius: 0.42rem;
            background-color: transparent;
        }

        .showPassword {
            display: block;
            position: absolute;
            width: 0.37rem;
            height: 0.34rem;
            background: url(images/homeIcon3.jpg) no-repeat;
            background-size: cover;
            right: 0.2rem;
            top: 50%;
            margin-top: -0.17rem;
        }

        .btmBox {
            overflow: hidden;
            position: fixed;
            width: 6.45rem;
            left: 50%;
            margin-left: -3.225rem;
            padding-bottom: 0.5rem;
            bottom: 0;
        }

        .getPassword,
        .goRegister {
            display: block;
            font-size: 0.24rem;
            text-decoration: none;
        }

        .getPassword {
            float: left;
            color: #333;
        }

        .goRegister {
            float: right;
            color: #ff5f50;
        }

        .cH {
            overflow: hidden;
            position: inherit;
            width: 6.45rem;
            left: 0;
            margin: 0.6rem auto 0;
            padding-bottom: 0.3rem;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="bannerBox">
            <img src="images/homeBanner.jpg" alt="">
        </div>
        <form class="formBox">
            <div class="formList formList1">
                <input class="phoneNum" type="number" placeholder="请输入手机号">
            </div>
            <div class="formList formList2">
                <input class="passWord" type="password" placeholder="请输入密码">
                <i class="showPassword"></i>
            </div>

            <input class="sub" type="submit" value="登陆">
        </form>

        <div class="btmBox">
            <a class="getPassword" href="javascript:void(0)">忘记密码？</a>
            <a class="goRegister" href="javascript:void(0)">现在注册&nbsp;&nbsp;></a>
        </div>
    </div>

    <script>
         $(function () {
             $(window).load(function(){
                 var hH = $('body').height();
                 var bH = $(".bannerBox").outerHeight();
                 var fH = $(".formBox").outerHeight(true);
                 var btmH = $(".btmBox").outerHeight();
                 var tH = bH + fH;
                 var cH = hH - tH;
                //  alert('流浪器=='+hH)
                //  alert('內容=='+bH)
                //  alert('內容=='+fH)
                //  alert('底部=='+btmH)
                //  alert('差值=='+cH)
                 if(cH < btmH) {
                 $(".btmBox").addClass('cH');
             }
         })
          })
    </script>
</body>

</html>